<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<style>
*{font-family: 'Roboto', sans-serif; box-sizing:border-box;}
body{padding:30px 50px; margin:0;}
ul{margin:0;padding:0}
li{list-style:none; margin:0 0 10px 0; overflow:hidden;}
h2{margin:20px 0 0px;}
h3{font-size:18px;border-bottom:1px solid #ddd;padding:0 0 5px 0;margin:20px 0;}
p{color:#888;margin:10px 0 20px 0;}
div{float:left; overflow:hidden;}
div.small{width:40px;height:25px;text-indent:10000px;}
div.tiny{width:10px;height:25px;text-indent:10000px;margin-left:-20px; }
div.super{width:410px;height:25px;color:#fff;line-height:25px;font-size:14px;text-transform:uppercase;padding-left:10px}
div.dark{color:rgba(0,0,0,0.6);}
div.gap{width:25px;height:25px;}
label{width:250px;float:left;font-size:14px;color:#555;}
strong{font-weight:800;}
.col1{width:435px;}
.col2{width:425px;}
#tooltip{padding:10px; background:#fff;-webkit-box-shadow:0px 4px 10px rgba(0,0,0,0.5);position:absolute;margin:-5px 0 0 -15px;display:none}
.wrapper{width:1600px; overflow:hidden;}
</style>
</head>
<body>
	<div class="wrapper">
		<h2>ACUX Charts Color Specifications</h2>
		<p>Hover over color bars to see HEX value </p>
		<h3>Quantum  Color Palette </h3>
		<ul>
			<li>
				<label>&nbsp;</label>
				<div class="col1">Primary Colors</div>
				<div class="col2">Tints</div>
				<div class="col3">Bright Colors</div>
			</li>

			<li>
				<label><strong>Google Red</strong></label>
				<div class="tiny red">db4437</div>

				<div class="super">db4437</div>
				<div class="gap"></div>
				<div class="small">fbe9e7</div>
				<div class="small">f4c7c3</div>
				<div class="small">eda29b</div>
				<div class="small">e67c73</div>
				<div class="small">e06055</div>
				<div class="small">db4437</div>
				<div class="small">d23f31</div>
				<div class="small">c53929</div>
				<div class="small">b93221</div>
				<div class="small">a52714</div>
				<div class="gap"></div>
				<div class="small">ff8a80</div>
				<div class="small">ff5252</div>
				<div class="small">ff1744</div>
				<div class="small">d50000</div>
			</li>
			<li>
				<label>Pink</label>

				<div class="super">e91e63</div>
				<div class="gap"></div>
				<div class="small">fce4ec</div>
				<div class="small">f8bbd0</div>
				<div class="small">f48fb1</div>
				<div class="small">f06292</div>
				<div class="small">ec407a</div>
				<div class="small">e91e63</div>
				<div class="small">d81b60</div>
				<div class="small">c2185b</div>
				<div class="small">ad1457</div>
				<div class="small">880e4f</div>
				<div class="gap"></div>
				<div class="small">ff80ab</div>
				<div class="small">ff4081</div>
				<div class="small">f50057</div>
				<div class="small">c51162</div>
			</li>
			<li>
				<label>Purple</label>

				<div class="super">9c27b0</div>
				<div class="gap"></div>
				<div class="small">f3e5f5</div>
				<div class="small">e1bee7</div>
				<div class="small">ce93d8</div>
				<div class="small">ba68c8</div>
				<div class="small">ab47bc</div>
				<div class="small">9c27b0</div>
				<div class="small">8e24aa</div>
				<div class="small">7b1fa2</div>
				<div class="small">6a1b9a</div>
				<div class="small">4a148c</div>
				<div class="gap"></div>
				<div class="small">ea80fc</div>
				<div class="small">e040fb</div>
				<div class="small">d500f9</div>
				<div class="small">aa00ff</div>
			</li>
			<li>
				<label>Deep Purple</label>

				<div class="super">673ab7</div>
				<div class="gap"></div>
				<div class="small">ede7f6</div>
				<div class="small">d1c4e9</div>
				<div class="small">b39ddb</div>
				<div class="small">9575cd</div>
				<div class="small">7e57c2</div>
				<div class="small">673ab7</div>
				<div class="small">5e35b1</div>
				<div class="small">512da8</div>
				<div class="small">4527a0</div>
				<div class="small">311b92</div>
				<div class="gap"></div>
				<div class="small">b388ff</div>
				<div class="small">7c4dff</div>
				<div class="small">651fff</div>
				<div class="small">6200ea</div>
			</li>
			<li>
				<label>Indigo</label>

				<div class="super">3f51b5</div>
				<div class="gap"></div>
				<div class="small">e8eaf6</div>
				<div class="small">c5cae9</div>
				<div class="small">9fa8da</div>
				<div class="small">7986cb</div>
				<div class="small">5c6bc0</div>
				<div class="small">3f51b5</div>
				<div class="small">3949ab</div>
				<div class="small">303f9f</div>
				<div class="small">283593</div>
				<div class="small">1a237e</div>
				<div class="gap"></div>
				<div class="small">8c9eff</div>
				<div class="small">536dfe</div>
				<div class="small">3d5afe</div>
				<div class="small">304ffe</div>
			</li>

			<li>
				<label><strong>Google Blue</strong></label>
				<div class="tiny blue">4285f4</div>

				<div class="super">4285f4</div>
				<div class="gap"></div>
				<div class="small">e8f0fe</div>
				<div class="small">c6dafc</div>
				<div class="small">a1c2fa</div>
				<div class="small">7baaf7</div>
				<div class="small">5e97f6</div>
				<div class="small">4285f4</div>
				<div class="small">3b78e7</div>
				<div class="small">3367d6</div>
				<div class="small">2a56c6</div>
				<div class="small">1c3aa9</div>
				<div class="gap"></div>
				<div class="small">82b1ff</div>
				<div class="small">448aff</div>
				<div class="small">2979ff</div>
				<div class="small">2962ff</div>
			</li>
			<li>
				<label>Light Blue</label>

				<div class="super">03a9f4</div>
				<div class="gap"></div>
				<div class="small">e1f5fe</div>
				<div class="small">b3e5fc</div>
				<div class="small">81d4fa</div>
				<div class="small">4fc3f7</div>
				<div class="small">29b6f6</div>
				<div class="small">03a9f4</div>
				<div class="small">039be5</div>
				<div class="small">0288d1</div>
				<div class="small">0277bd</div>
				<div class="small">01579b</div>
				<div class="gap"></div>
				<div class="small">80d8ff</div>
				<div class="small">40c4ff</div>
				<div class="small">00b0ff</div>
				<div class="small">0091ea</div>
			</li>
			<li>
				<label>Teal</label>

				<div class="super">00bcd4</div>
				<div class="gap"></div>
				<div class="small">e0f7fa</div>
				<div class="small">b2ebf2</div>
				<div class="small">80deea</div>
				<div class="small">4dd0e1</div>
				<div class="small">26c6da</div>
				<div class="small">00bcd4</div>
				<div class="small">00acc1</div>
				<div class="small">0097a7</div>
				<div class="small">00838f</div>
				<div class="small">006064</div>
				<div class="gap"></div>
				<div class="small">84ffff</div>
				<div class="small">18ffff</div>
				<div class="small">00e5ff</div>
				<div class="small">00b8d4</div>
			</li>
			<li>
				<label>Deep Teal</label>

				<div class="super">009688</div>
				<div class="gap"></div>
				<div class="small">e0f2f1</div>
				<div class="small">b2dfdb</div>
				<div class="small">80cbc4</div>
				<div class="small">4db6ac</div>
				<div class="small">26a69a</div>
				<div class="small">009688</div>
				<div class="small">00897b</div>
				<div class="small">00796b</div>
				<div class="small">00695c</div>
				<div class="small">004d40</div>
				<div class="gap"></div>
				<div class="small">a7ffeb</div>
				<div class="small">64ffda</div>
				<div class="small">1de9b6</div>
				<div class="small">00bfa5</div>
			</li>

			<li>
				<label><strong>Google Green</strong></label>
				<div class="tiny green">0f9d58</div>

				<div class="super">0f9d58</div>
				<div class="gap"></div>
				<div class="small">e2f3eb</div>
				<div class="small">b7e1cd</div>
				<div class="small">87ceac</div>
				<div class="small">57bb8a</div>
				<div class="small">33ac71</div>
				<div class="small">0f9d58</div>
				<div class="small">0d904f</div>
				<div class="small">0b8043</div>
				<div class="small">097138</div>
				<div class="small">055524</div>
				<div class="gap"></div>
				<div class="small">b9f6ca</div>
				<div class="small">69f0ae</div>
				<div class="small">00e676</div>
				<div class="small">00c853</div>
			</li>
			<li>
				<label>Light Green</label>

				<div class="super">8bc34a</div>
				<div class="gap"></div>
				<div class="small">f1f8e9</div>
				<div class="small">dcedc8</div>
				<div class="small">c5e1a5</div>
				<div class="small">aed581</div>
				<div class="small">9ccc65</div>
				<div class="small">8bc34a</div>
				<div class="small">7cb342</div>
				<div class="small">689f38</div>
				<div class="small">558b2f</div>
				<div class="small">33691e</div>
				<div class="gap"></div>
				<div class="small">ccff90</div>
				<div class="small">b2ff59</div>
				<div class="small">76ff03</div>
				<div class="small">64dd17</div>
			</li>
			<li>
				<label>Lime</label>

				<div class="super dark">cddc39</div>
				<div class="gap"></div>
				<div class="small">f9fbe7</div>
				<div class="small">f0f4c3</div>
				<div class="small">e6ee9c</div>
				<div class="small">dce775</div>
				<div class="small">d4e157</div>
				<div class="small">cddc39</div>
				<div class="small">c0ca33</div>
				<div class="small">afb42b</div>
				<div class="small">9e9d24</div>
				<div class="small">827717</div>
				<div class="gap"></div>
				<div class="small">f4ff81</div>
				<div class="small">eeff41</div>
				<div class="small">c6ff00</div>
				<div class="small">aeea00</div>
			</li>
			<li>
				<label>Yellow</label>

				<div class="super dark">ffeb3b</div>
				<div class="gap"></div>
				<div class="small">fffde7</div>
				<div class="small">fff9c4</div>
				<div class="small">fff59d</div>
				<div class="small">fff176</div>
				<div class="small">ffee58</div>
				<div class="small">ffeb3b</div>
				<div class="small">fdd835</div>
				<div class="small">fbc02d</div>
				<div class="small">f9a825</div>
				<div class="small">f57f17</div>
				<div class="gap"></div>
				<div class="small">ffff8d</div>
				<div class="small">ffff00</div>
				<div class="small">ffea00</div>
				<div class="small">ffd600</div>
			</li>

			<li>
				<label><strong>Google Yellow</strong></label>
				<div class="tiny">f4b400</div>

				<div class="super">f4b400</div>
				<div class="gap"></div>
				<div class="small">fef6e0</div>
				<div class="small">fce8b2</div>
				<div class="small">fada80</div>
				<div class="small">f7cb4d</div>
				<div class="small">f6bf26</div>
				<div class="small">f4b400</div>
				<div class="small">f2a600</div>
				<div class="small">f09300</div>
				<div class="small">ee8100</div>
				<div class="small">ea6100</div>
				<div class="gap"></div>
				<div class="small">ffde80</div>
				<div class="small">ffcd40</div>
				<div class="small">ffbc00</div>
				<div class="small">ff9e00</div>
			</li>
			<li>
				<label>Orange</label>

				<div class="super">ff9800</div>
				<div class="gap"></div>
				<div class="small">fff3e0</div>
				<div class="small">ffe0b2</div>
				<div class="small">ffcc80</div>
				<div class="small">ffb74d</div>
				<div class="small">ffa726</div>
				<div class="small">ff9800</div>
				<div class="small">fb8c00</div>
				<div class="small">f57c00</div>
				<div class="small">ef6c00</div>
				<div class="small">e65100</div>
				<div class="gap"></div>
				<div class="small">ffd180</div>
				<div class="small">ffab40</div>
				<div class="small">ff9100</div>
				<div class="small">ff6d00</div>
			</li>
			<li>
				<label>Deep Orange</label>

				<div class="super">ff5722</div>
				<div class="gap"></div>
				<div class="small">fbe9e7</div>
				<div class="small">ffccbc</div>
				<div class="small">ffab91</div>
				<div class="small">ff8a65</div>
				<div class="small">ff7043</div>
				<div class="small">ff5722</div>
				<div class="small">f4511e</div>
				<div class="small">e64a19</div>
				<div class="small">d84315</div>
				<div class="small">bf360c</div>
				<div class="gap"></div>
				<div class="small">ff9e80</div>
				<div class="small">ff6e40</div>
				<div class="small">ff3d00</div>
				<div class="small">dd2c00</div>
			</li>

			
			<li>
				<label>Grey</label>

				<div class="super">a3a3a3</div>
				<div class="gap"></div>
				<div class="small">fafafa</div>
				<div class="small">f1f1f1</div>
				<div class="small">eeeeee</div>
				<div class="small">e1e1e1</div>
				<div class="small">c2c2c2</div>
				<div class="small">a3a3a3</div>
				<div class="small">848484</div>
				<div class="small">646464</div>
				<div class="small">444444</div>
				<div class="small">262626</div>
			</li>
			<li>
				<label>Blue Grey</label>

				<div class="super">607d8b</div>
				<div class="gap"></div>
				<div class="small">eceff1</div>
				<div class="small">cfd8dc</div>
				<div class="small">b0bec5</div>
				<div class="small">90a4ae</div>
				<div class="small">78909c</div>
				<div class="small">607d8b</div>
				<div class="small">546e7a</div>
				<div class="small">455a64</div>
				<div class="small">37474f</div>
				<div class="small">263238</div>
			</li>
			<li>
				<label>Brown</label>

				<div class="super">795548</div>
				<div class="gap"></div>
				<div class="small">efebe9</div>
				<div class="small">d7ccc8</div>
				<div class="small">bcaaa4</div>
				<div class="small">a1887f</div>
				<div class="small">8d6e63</div>
				<div class="small">795548</div>
				<div class="small">6d4c41</div>
				<div class="small">5d4037</div>
				<div class="small">4e342e</div>
				<div class="small">3e2723</div>
			</li>
			
			
		</ul>

		<h3>ACUX Standard Color Palette</h3>
		<ul>
			<li><label>&nbsp;</label><div class="super">db4437</div></li>
			<li><label>&nbsp;</label><div class="super">ab47bc</div></li>
			<li><label>&nbsp;</label><div class="super">4285f4</div></li>
			<li><label>&nbsp;</label><div class="super">00acc1</div></li>
			<li><label>&nbsp;</label><div class="super">0f9d58</div></li>
			<li><label>&nbsp;</label><div class="super">9e9d24</div></li>	
			<li><label>&nbsp;</label><div class="super">f4b400</div></li>
			<li><label>&nbsp;</label><div class="super">ff7043</div></li>
			<li><label>Primary Colors</label>
				<div class="small">4285f4</div>
				<div class="small">db4437</div>
				<div class="small">f4b400</div>
				<div class="small">0f9d58</div>
			</li>
			<li><label>Secondary Colors</label>
				<div class="small">ab47bc</div>
				<div class="small">ff7043</div>
				<div class="small">00acc1</div>
				<div class="small">9e9d24</div>
			</li>
		</ul>

		<h3>ACUX Standard Graduated Palette</h3>
		<ul>
			<li>
				<label>&nbsp;</label>
				<div class="small">fbe9e7</div>
				<div class="small">e67c73</div>
				<div class="small">d23f31</div>
				<div class="small">a52714</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">f3e5f5</div>
				<div class="small">ba68c8</div>
				<div class="small">8e24aa</div>
				<div class="small">4a148c</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e8f0fe</div>
				<div class="small">7baaf7</div>
				<div class="small">3b78e7</div>
				<div class="small">1c3aa9</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e0f7fa</div>
				<div class="small">4dd0e1</div>
				<div class="small">00acc1</div>
				<div class="small">006064</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e2f3eb</div>
				<div class="small">57bb8a</div>
				<div class="small">0d904f</div>
				<div class="small">055524</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">fef6e0</div>
				<div class="small">f7cb4d</div>
				<div class="small">f2a600</div>
				<div class="small">ea6100</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">fbe9e7</div>
				<div class="small">ff8a65</div>
				<div class="small">f4511e</div>
				<div class="small">bf360c</div>
			</li>
		</ul>
		<h3>ACUX Standard Color States</h3>
		<ul>
			<li>
				<label>Disabled/Normal/Active</label>
				<div class="small">f4c7c3</div>
				<div class="small">db4437</div>
				<div class="small">a52714</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e1bee7</div>
				<div class="small">ab47bc</div>
				<div class="small">4a148c</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">c6dafc</div>
				<div class="small">4285f4</div>
				<div class="small">1c3aa9</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">b2ebf2</div>
				<div class="small">00acc1</div>
				<div class="small">006064</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">b7e1cd</div>
				<div class="small">0f9d58</div>
				<div class="small">055524</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">f0f4c3</div>
				<div class="small">9e9d24</div>
				<div class="small">827717</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">fce8b2</div>
				<div class="small">f4b400</div>
				<div class="small">f09300</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">ffccbc</div>
				<div class="small">ff7043</div>
				<div class="small">bf360c</div>
			</li>
		</ul>

		<h3>ACUX Colorblind Assist Palette (activated by a settings toggle)</h3>
		<ul>
			<li><label>&nbsp;</label><div class="super">c53929</div></li>
			<li><label>&nbsp;</label><div class="super">6a1b9a</div></li>
			<li><label>&nbsp;</label><div class="super">4285f4</div></li>
			<li><label>&nbsp;</label><div class="super">80deea</div></li>
			<li><label>&nbsp;</label><div class="super">087037</div></li>
			<li><label>&nbsp;</label><div class="super">c0ca33</div></li>
			<li><label>&nbsp;</label><div class="super">f7cb4d</div></li>
			<li><label>&nbsp;</label><div class="super">ff7043</div></li>
			<li><label>Primary Colors</label>
				<div class="small">4285f4</div>
				<div class="small">c53929</div>
				<div class="small">f7cb4d</div>
				<div class="small">087037</div>
			</li>
			<li><label>Secondary Colors</label>
				<div class="small">6a1b9a</div>
				<div class="small">ff7043</div>
				<div class="small">80deea</div>
				<div class="small">c0ca33</div>
			</li>
		</ul>

		<h3>ACUX Colorblind Assist Graduated Colors (activated by a settings toggle)</h3>
		<ul>
			<li>
				<label>&nbsp;</label>
				<div class="small">fbe9e7</div>
				<div class="small">e67c73</div>
				<div class="small">d23f31</div>
				<div class="small">a52714</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">f3e5f5</div>
				<div class="small">ba68c8</div>
				<div class="small">8e24aa</div>
				<div class="small">4a148c</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e8f0fe</div>
				<div class="small">7baaf7</div>
				<div class="small">3b78e7</div>
				<div class="small">1c3aa9</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e0f7fa</div>
				<div class="small">4dd0e1</div>
				<div class="small">00acc1</div>
				<div class="small">006064</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e2f3eb</div>
				<div class="small">57bb8a</div>
				<div class="small">0d904f</div>
				<div class="small">055524</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">f9fbe7</div>
				<div class="small">dce775</div>
				<div class="small">c0ca33</div>
				<div class="small">827717</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">fef6e0</div>
				<div class="small">f7cb4d</div>
				<div class="small">f2a600</div>
				<div class="small">ea6100</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">fbe9e7</div>
				<div class="small">ff8a65</div>
				<div class="small">f4511e</div>
				<div class="small">bf360c</div>
			</li>
		</ul>

		<h3>ACUX Colorblind Assist States (activated by a settings toggle)</h3>
		<ul>
			<li>
				<label>Disabled/Normal/Active</label>
				<div class="small">f4c7c3</div>
				<div class="small">c53929</div>
				<div class="small">a52714</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">e1bee7</div>
				<div class="small">6a1b9a</div>
				<div class="small">4a148c</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">c6dafc</div>
				<div class="small">4285f4</div>
				<div class="small">1c3aa9</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">b2ebf2</div>
				<div class="small">80deea</div>
				<div class="small">006064</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">b7e1cd</div>
				<div class="small">087037</div>
				<div class="small">055524</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">f0f4c3</div>
				<div class="small">c0ca33</div>
				<div class="small">827717</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">fce8b2</div>
				<div class="small">f7cb4d</div>
				<div class="small">f2a600</div>
			</li>
			<li>
				<label>&nbsp;</label>
				<div class="small">ffccbc</div>
				<div class="small">ff7043</div>
				<div class="small">bf370d</div>
			</li>
		</ul>
	</div>
	<div id="tooltip"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		$("div.small, div.super, div.tiny").each(function(){
			$(this).css("background-color",$(this).html());
		});
		$(".small").hover(function(){
			var t = $(this).offset().top;
			var l = $(this).offset().left;
			$("#tooltip").html($(this).html()).css({top:t,left:l}).fadeIn();
		});
		$("#tooltip").mouseenter(function(){
		    clearTimeout($(this).data('timeoutId'));
		 
			}).mouseleave(function(){
		    var someElement = $(this),
		        timeoutId = setTimeout(function(){
		            $("#tooltip").fadeOut();
		        }, 650);
		    someElement.data('timeoutId', timeoutId); 
		});
	});
	</script>
</body>